<template>
	<up-navbar placeholder :title="rankingType === 'customer' ? '客服排行榜' : '打手排行榜'" :autoBack="true"
		bgColor="rgba(255,255,255,0)"></up-navbar>
	<image src="@/static/images/index_bg/login_bg.png" class="w-[100%] h-[40vh] z-[-1] absolute top-0"></image>
	<view class="ranking-container">

		<!-- 接单排行榜标题 -->
		<view class="ranking-title">{{ rankingType === 'customer' ? '派单排行榜' : '接单排行榜' }}</view>

		<!-- 日期选择器  -->
		<view class="date-picker" @click="show = true">
			{{$u.timeFormat(time, 'yyyy年mm月')}}
		</view>

		<!-- 当前排名 -->
		<view class="current-rank">
			<text>您当前排名：</text>
			<text class="rank-status">{{ userRank > total?'未上榜': userRank}}</text>
		</view>

		<!-- 排行榜列表 -->
		<view class="ranking-list">
			<!-- 表头 -->
			<view class="list-header">
				<text class="rank-col">排名</text>
				<text class="avatar-col-1 mx-[20rpx]">头像</text>
				<text class="name-col ">昵称</text>
				<text class="count-col">单数</text>
			</view>
			
			<!-- 列表内容 -->
			<view class="list-content">
				<z-paging ref="paging" v-model="rankingList" @query="queryList" :fixed="false"
					:show-refresher-when-reload="false" :empty-view-text="'暂无排行数据'" :empty-view-error-text="'加载失败，请点击重试'"
					width="100%"  height="calc(100vh - 600rpx - 44px)">
					<view class="list-item" v-for="(item, index) in rankingList" :key="index">
						<text class="rank-col">{{ index+1 }}</text>
						<image class="avatar-col" :src="item.uavatar" mode="aspectFill"></image>
						<text class="name-col">{{ item.uname }}</text>
						<text class="count-col">{{ item.orderNumber }}</text>
					</view>
				</z-paging>
			</view>
		</view>
	</view>
	<up-datetime-picker :show="show" v-model="time" mode="year-month" @cancel="show = false"
		@confirm="confirm"></up-datetime-picker>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import useUserStore from '@/store/modules/user';

	import {
		sendRanking,
		acceptRanking,
		rankingpm,
		acceptRankingpm
	} from '@/api/ranking';

	// 定义响应式数据
	const rankingType = ref('customer');
	const rankingList = ref([]);
	const userStore = useUserStore();
	const userRank = ref('');
	const total = ref('');
    const paging = ref(null);

	// 分页查询
	const queryList = async (pageNum,pageSize) => {
		try {
			const params = {
				date: uni.$u.timeFormat(time.value, 'yyyy/mm'),
				pageNum,
				pageSize
			};

			console.log('请求参数:', params);

		
			// 根据类型调用不同接口
			if (rankingType.value === 'customer') {
				// 获取发单榜单
				const res = await sendRanking(params);
				console.log('发单榜单数据:', res);
				if (res.code === 200) {
					total.value = res.total;
					console.log('rankingList.value:', rankingList.value);

				}
				// 获取用户排名
				if (userStore.userId) {
					const rankRes = await rankingpm(userStore.userId);
					console.log('用户发单排名:', rankRes);
					if (rankRes && rankRes.data) {
						userRank.value = rankRes.data || '未上榜';
					}
				}
				paging.value.complete(res.rows);
			} else {
				// 获取接单榜单
				const res = await acceptRanking(params);
				console.log('接单榜单数据:', res);
				if (res.code === 200) {
					total.value = res.total;
					console.log('rankingList.value:', rankingList.value);

				}
				paging.value.complete(res.rows);
				// 获取用户排名
				if (userStore.userId) {
					const rankRes = await acceptRankingpm(userStore.userId);
					console.log('用户接单排名:', rankRes);
					if (rankRes && rankRes.data) {
						userRank.value = rankRes.data || '未上榜';
					}
				}
			}

		} catch (error) {
			console.error('获取排行榜数据失败:', error);
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			});
		}
	};

	// 时间选择器
	const show = ref(false);
	const time = ref(new Date().getTime());
	const confirm = (e) => {
		console.log(e);
		show.value = false;
		time.value = e.value;
		queryList();
		// paging.value.reload();
	};
	// 使用 onLoad 获取页面参数
	onLoad((options) => {
		console.log('页面参数：', options);
		if (options.type) {
			rankingType.value = options.type;
			// 获取排行榜数据
			// getRankingData();
            queryList();
		}
	});

	// 获取排行榜数据的方法
	// const getRankingData = async () => {
	// 	try {
	// 		const params = {
	// 			date: uni.$u.timeFormat(time.value, 'yyyy/mm')
	// 		};

	// 		console.log('请求参数:', params);

	// 		// 根据类型调用不同接口
	// 		if (rankingType.value === 'customer') {
	// 			// 获取发单榜单
	// 			const res = await sendRanking(params);
	// 			console.log('发单榜单数据:', res);
	// 			if (res.code === 200) {
	// 				rankingList.value = res.rows;
	// 				total.value = res.total;
	// 				console.log('rankingList.value:', rankingList.value);

	// 			}

	// 			// 获取用户排名
	// 			if (userStore.userId) {
	// 				const rankRes = await rankingpm(userStore.userId);
	// 				console.log('用户发单排名:', rankRes);
	// 				if (rankRes && rankRes.data) {
	// 					userRank.value = rankRes.data || '未上榜';
	// 				}
	// 			}
	// 		} else {
	// 			// 获取接单榜单
	// 			const res = await acceptRanking(params);
	// 			console.log('接单榜单数据:', res);
	// 			if (res.code === 200) {
	// 				rankingList.value = res.rows;
	// 				total.value = res.total;
	// 				console.log('rankingList.value:', rankingList.value);

	// 			}

	// 			// 获取用户排名
	// 			if (userStore.userId) {
	// 				const rankRes = await acceptRankingpm(userStore.userId);
	// 				console.log('用户接单排名:', rankRes);
	// 				if (rankRes && rankRes.data) {
	// 					userRank.value = rankRes.data || '未上榜';
	// 				}
	// 			}
	// 		}
	// 	} catch (error) {
	// 		console.error('获取排行榜数据失败:', error);
	// 		uni.showToast({
	// 			title: '获取数据失败',
	// 			icon: 'none'
	// 		});
	// 	}
	// };

	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	.ranking-container {


		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			background-color: #fff;

			.back-icon {
				width: 60rpx;
			}

			.header-title {
				font-size: 34rpx;
				font-weight: bold;
			}

			.right-icons {
				display: flex;
				align-items: center;
			}
		}

		.ranking-title {
			font-size: 40rpx;
			font-weight: bold;
			color: #0066cc;
			margin: 40rpx 30rpx 20rpx;
		}

		// 日期选择器样式 - 更新
		.date-picker {
			margin: 0 30rpx 20rpx;
			position: relative;

			.date-display {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15rpx 20rpx;
				background-color: #f5f5f5;
				border-radius: 8rpx;
				font-size: 28rpx;
				border: 1px solid #e5e5e5;
			}
		}

		.current-rank {
			margin: 0 30rpx 30rpx;
			padding: 20rpx;
			// background-color: rgba(255, 255, 255, 0.5);
			border-radius: 10rpx;

			.rank-status {
				color: #ff9900;
				font-weight: bold;
			}
		}

		.ranking-list {
			margin: 0 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;

			.list-header,
			.list-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-bottom: 1px solid #eee;
			}

			.list-header {
				font-weight: bold;

			}

			.rank-col {
				width: 80rpx;
				text-align: center;
			}

			.avatar-col-1 {
				width: 80rpx;
				text-align: center;
			}

			.avatar-col {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin: 0 20rpx;
			}

			.name-col {
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 20rpx;
			}

			.count-col {
				width: 100rpx;
				text-align: right;
				color: #ff9900;
				font-weight: bold;
			}
		}
	}
</style>